<template>
  <div class="title">
    <h1>{{text[titleNum]}}</h1>
  </div>
</template>

<script>
export default {
    name: "LoginTitle",
    data(){
        return{
            titleNum:0,
            text:["SIGN IN","REGISTER","RSET"]
        }
    },
    mounted(){
      this.$bus.$on('changeTitle',(data)=>{
        this.titleNum = data
      })
    },
    beforeDestroy(){
      this.$bus.$off('changeTitle')
    }
};
</script>

<style scoped>
.title {
  padding-top: 120px;
  padding-bottom: 70px;
  width: 100%;
  height: 100px;
  position:absolute;
}
.title h1 {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 3.5em;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 5px rgba(255, 255, 255, 1);
  mix-blend-mode: overlay;
}
</style>